<template>
  <div>
    <div class="root">
      <div class="one">
        <div class="nav">
          <span class="basic">产品信息</span>
        </div>
        <div class="content">
          <!-- 表格数据 -->
          <el-table :data="tableData" stripe style="width: 90%">
            <el-table-column prop="picurl" label="产品图片" align="center">
              <template #default="{ row }">
                <img :src="address + row.picurl" />
              </template>
            </el-table-column>
            <el-table-column
              prop="productName"
              label="产品名称"
              align="center"
            />
            <el-table-column prop="spec" label="产品型号" align="center" />
            <el-table-column prop="num" label="需求数量" align="center" />
            <el-table-column label="操作" align="center">
              <template #default="{ row }">
                <el-button>查看报价</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button>关闭</el-button>
        <el-button type="primary" @click=""> 提交 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import path from "@/utils/env.js";
import { queryCategory } from "@/api/enquiryDetail.js";
import { useRoute } from "vue-router";
const tableData = ref([]);
const route = useRoute();
const address = ref(path);

async function getProductList() {
  let code = route.query.eid;
  console.log(code);
  let res = await queryCategory(code);
  tableData.value = res.data;
}
// 初始化加载列表
onBeforeMount(() => {
  getProductList();
});
</script>

<style scoped>
.root {
  width: 95vw;
  border-radius: 5px;
}
.nav {
  background-color: #efefef;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #c1c1c1;
}
.basic {
  margin-left: 30px;
}

:deep(.avatar-uploader .avatar) {
  width: 128px;
  height: 128px;
  display: block;
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  text-align: center;
}
.dialog-footer {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 40%;
  transform: translateX(-40%);
}
.one {
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
}
</style>
